<template>
  <div>
    <quill-editor
      ref="text"
      v-model="content"
      class="myQuillEditor"
      :options="editorOption"
    />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [
                {
                  list: 'ordered'
                },
                {
                  list: 'bullet'
                }
              ],
              ['blockquote'],

              ['code-block', 'link', 'image']
            ],
            handlers: {
              shadeBox: null,
              insertMetric: function(e) {
                // 方法体
                console.log(e)
              }
            }
          }
        }
      }
    }
  },
  mounted() {
    this.$refs.text.quill.enable(false)
    setTimeout(() => {
      this.$refs.text.quill.enable(true)
    }, 1000)
  },

  methods: {
    submit() {
      this.data = this.$refs.text.value
      console.log(this.$refs.text.value)
    },
    bodydata(data) {
      this.content = data
      this.$refs.text.quill.enable(false)
      setTimeout(() => {
        this.$refs.text.quill.enable(true)
      }, 1000)
    }
    // editorOption里是放图片上传配置参数用的，例如：
    // action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
    // methods: 'post',  // 必填参数 图片上传方式
    // token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
    // name: 'upload_file',  // 必填参数 文件的参数名
    // size: 500,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
    // accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'
    // 可选 可上传的图片格式
  }

}
</script>

<style lang="scss" scoped>
::v-deep{

.ql-container.ql-snow{
height: 200px;
}
.quill-editor.myQuillEditor{
    width: 660px;

}
}
</style>>

